<template>
    <div class="addCourtyard">
        <div class="edit">
            <span>新增院区信息</span>
        </div>
        <div>
            <el-form label-width="90px" :model="formState" :rules="rules" ref="formRef">
                <el-form-item style="margin-top:20px" label-width="120px" label="院区姓名" prop="yqname">
                    <el-input style="width:200px" v-model="formState.yqname" />
                </el-form-item>
                <el-form-item label-width="120px" label="联系电话" prop="tel">
                    <el-input style="width:200px" v-model="formState.tel" />
                </el-form-item>
                <el-form-item label-width="120px" label="公交" prop="gj">
                    <el-input style="width:200px" v-model="formState.gj" />
                </el-form-item>
                <el-form-item label-width="120px" label="院区地址" prop="yndz">
                    <el-cascader v-model="formState.yndz" style="width:155px" placeholder="Try searchingL Guide"
                        :options="options" filterable />
                    &nbsp;&nbsp;&nbsp;<el-input style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label-width="120px" label="院内导航" prop="avatar">
                    <el-table :data="tableData" border style="width: 500px;">
                        <el-table-column prop="id" label="序号" width="60" />
                        <el-table-column prop="lc" label="楼层" width="60" />
                        <el-table-column prop="lcindex" label="楼层索引" width="280" align="center" />
                        <el-table-column prop="address" label="操作" align="center">
                            <template #default="scope">
                                <el-icon>
                                    <ZoomIn />
                                </el-icon>&nbsp;&nbsp;&nbsp;
                                <el-icon>
                                    <Remove />
                                </el-icon>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label-width="120px" label="院内状态" prop="ynstate">
                    <el-switch v-model="formState.ynstate" label="1" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm"> 保存用户信息 </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ZoomIn, Remove } from '@element-plus/icons-vue'
import type { FormInstance, CascaderOption } from 'element-plus'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { batchAddUserApi } from '@/api/userApi';
import { AddCourtyardApi } from '@/api/hospitalApi'
import { propsToAttrMap } from '@vue/shared';
const tableData = [
    {
        id: 1,
        lc: '1楼',
        lcindex: '总服务台 警务室 收费处 急诊室 综合门诊',
    },
    {
        id: 2,
        lc: '2楼',
        lcindex: '总服务台 警务室 收费处 急诊室 综合门诊',
    },
    {
        id: 3,
        lc: '3楼',
        lcindex: '总服务台 警务室 收费处 急诊室 综合门诊',
    },
    {
        id: 4,
        lc: '4楼',
        lcindex: '总服务台 警务室 收费处 急诊室 综合门诊',
    },
]
const options = [
    {
        value: 'beijing',
        label: '北京',
        children: [
            {
                value: 'changping',
                label: '昌平',
                children: [
                    {
                        value: 'shahe',
                        label: '沙河',
                    },
                ]
            }
        ]
    },
    {
        value: 'shanghai',
        label: '上海',
    },
    {
        value: 'nanjing',
        label: '南京',
    },
    {
        value: 'tianjin',
        label: '天津',
    },
    {
        value: 'shenzhen',
        label: '深圳',
    },
]
const formState = reactive<any>({
    yqname: '',
    tel: '',
    gj: '',
    // yndz: ["beijing", "changping", "shahe"],
    yndz: '',
    avatar: 'http:xxx.com',
    ynstate: false
})
const formRef = ref<FormInstance>()
const submitForm = () => {
    // console.log(formState);
    if (!formRef.value) return
    formRef.value.validate(async (valid: boolean) => {
        if (valid) {
            let ret = await AddCourtyardApi(formState)
            if (ret.code == 0) {
                ElMessage({
                    message: '添加庭院成功',
                    type: 'success',
                })
                history.go(-1)
            }
        }else{
            return false
        }
    })

}
</script>

<style lang="scss" scoped>
.addCourtyard {
    margin: 18px 18px;
    height: 620px;
    border-radius: 8px;
    box-shadow: 2px 2px 4px #ccc, 2px 2px 4px #ccc, 2px 2px 4px #ccc, 2px 2px 4px #ccc, ;

    .edit {
        height: 30px;
        width: 100%;
        line-height: 30px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background-color: #ccc;

        span {
            margin-left: 10px;
            color: #006eff;
            font-size: 14px;
        }
    }

    :deep(.el-form-item__label) {
        display: block;
        padding-left: 40px;
    }
}</style>